<!--
    * Time    : 2021-02-22 09:13:36
    * Author  : zhangTj
    * Desc    : 个人店铺 - 商品管理页面
-->

<template>
    <div class="w750">
        <div class="font-14">
            <div class="bg-fff">
                <!-- 筛选条件 -->
                <div class="grid-column3 bg-fff position-sticky top-0 j-item-center a-center" style="z-index: 10; height: 44px">
                    <div
                        @click="showCategory = !showCategory"
                        class="bg-f5 postion-relative line-clamp1 text-center"
                        style="height: 30px; line-height: 30px; width: 85%"
                        :style="{
                            'border-radius': showCategory ? '15px 15px 0 0' : '15px'
                        }"
                    >
                        <span>{{ activeCategory.name || '所有分类' }}</span>
                        <span class="iconfont iconArrowBottom-copy ml" style="font-size: 12px"></span>

                        <!-- 展开所有分类 -->
                        <div
                            v-show="showCategory"
                            class="position-absolute left-0 top-0 w-100 h-100vh text-left"
                            style="z-index: 11; top: 37px; background: rgba(0, 0, 0, 0.4)"
                            @click.stop=""
                        >
                            <div class="px-2 py-1 grid-column2 grid-r-10 bg-f5">
                                <span @click="selectCategory('')" :class="[activeCategory == '' ? 'text-main' : '']">所有分类</span>
                                <span
                                    @click="selectCategory(item)"
                                    :class="[activeCategory.id == item.id ? 'text-main' : '']"
                                    v-for="item in categoryList"
                                    :key="item.id"
                                >
                                    {{ item.name }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div @click="selectSort('price')" class="d-flex a-center" style="height: 30px">
                        <span :class="[params.sortName == 'price' ? 'text-main' : 'text-333']">价格</span>
                        <div class="d-flex flex-column" style="margin-left: 3px">
                            <span
                                class="iconfont iconcaret-top scale-08"
                                :class="[params.sortName == 'price' && params.sortType == 'asc' ? 'text-main' : 'text-333']"
                                style="font-size: 10px; height: 10px; margin-bottom: -3px"
                            ></span>
                            <span
                                class="iconfont iconcaret-bottom scale-08"
                                :class="[params.sortName == 'price' && params.sortType == 'desc' ? 'text-main' : 'text-333']"
                                style="font-size: 10px; height: 10px"
                            ></span>
                        </div>
                    </div>
                    <div @click="selectSort('buys')" class="d-flex a-center" style="height: 30px">
                        <span :class="[params.sortName == 'buys' ? 'text-main' : 'text-333']">销量</span>
                        <div class="d-flex flex-column" style="margin-left: 3px">
                            <span
                                class="iconfont iconcaret-top scale-08"
                                :class="[params.sortName == 'buys' && params.sortType == 'asc' ? 'text-main' : 'text-333']"
                                style="font-size: 10px; height: 10px; margin-bottom: -3px"
                            ></span>
                            <span
                                class="iconfont iconcaret-bottom scale-08"
                                :class="[params.sortName == 'buys' && params.sortType == 'desc' ? 'text-main' : 'text-333']"
                                style="font-size: 10px; height: 10px"
                            ></span>
                        </div>
                    </div>
                </div>

                <!-- 商品列表 -->
                <div style="margin-bottom: 100px">
                    <van-list
                        v-if="!partLoading && !paging.emptylist"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :immediate-check="false"
                        finished-text="没有更多了"
                        @load="loadMore"
                    >
                        <van-checkbox-group v-model="checkList">
                            <div
                                @click="$toPage('/goodsDetail', { goodsInfoId: goodItem.prodId })"
                                class="px-1 py-2 border-top d-flex a-center"
                                v-for="goodItem in list"
                                :key="goodItem.prodId"
                            >
                                <div @click.stop="" class="mr-1">
                                    <van-checkbox :name="goodItem.prodId" :checked-color="themes.color"></van-checkbox>
                                </div>
                                <div style="width: 1.8rem; height: 1.8rem">
                                    <legend-image
                                        style="border-radius: 5px"
                                        class="w-100 h-100"
                                        :pic="goodItem.prodPic"
                                        :options="{ w: '120', h: '120' }"
                                        :isJD="goodItem.prodSource == 'JD'"
                                    />
                                </div>
                                <div class="flex-1 ml-1 d-flex flex-column j-sb a-self-normal">
                                    <div>
                                        <span class="line-clamp2">
                                            {{ goodItem.prodName }}
                                        </span>
                                        <div class="font-12 mt d-flex a-center">
                                            <span
                                                v-if="shopInfo.listDisplayField && shopInfo.listDisplayField.split(',').includes('shareEarn')"
                                                class="text-fff rounded-2 bg-main"
                                                style="padding: 2px 4px"
                                            >
                                                赚￥{{ money(goodItem.firstCommission)[0] }}.{{ money(goodItem.firstCommission)[1] }}
                                            </span>
                                            <span
                                                v-if="shopInfo.listDisplayField && shopInfo.listDisplayField.split(',').includes('buys')"
                                                class="text-999 font-12 ml-1"
                                            >
                                                销量{{ goodItem.buys || 0 }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="d-flex j-sb a-center">
                                        <div class="text-main">
                                            <span class="font-12">会员价￥</span>
                                            <span class="font-18">{{ money(goodItem.price)[0] }}.{{ money(goodItem.price)[1] }}</span>
                                        </div>
                                        <div
                                            @click.stop="shareGood(goodItem)"
                                            class="border rounded-15 font-12 text-main border-c-main"
                                            style="padding: 4px 13px"
                                            :style="{ background: bg02 }"
                                        >
                                            <span>分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-checkbox-group>
                    </van-list>

                    <Noempty
                        v-if="paging.emptylist || paging.error"
                        :pic="require('@/assets/images/personal-no-good.png')"
                        :title="'您的店铺暂无商品，请前往商城选品'"
                    >
                        <div
                            v-if="shopInfo.supportSelectProd"
                            @click="$toPage('personalCategory')"
                            class="text-fff rounded-20 bg-main"
                            style="width: 142px; height: 32px; line-height: 30px; margin: 10px auto"
                        >
                            <span>选品</span>
                        </div>
                    </Noempty>

                    <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" color="#ee4133" />
                </div>
            </div>
        </div>

        <!-- 管理商品 -->
        <transition name="van-slide-up">
            <div v-show="checkList.length > 0" class="position-fixed shadow-sm w-100 font-14 bg-fff bottom-0 left-0 w-100" style="padding: 6px 20px">
                <div class="grid-column2 grid-c-20 j-item-stretch text-center">
                    <div @click="cancel" class="border rounded-20" style="padding: 9px 50px">
                        <span>取消</span>
                    </div>
                    <div @click="remove" class="border rounded-20" style="padding: 9px 50px">
                        <span>移除</span>
                    </div>
                </div>
            </div>
        </transition>

        <!-- 分享店铺海报 -->
        <vue-canvas-poster class="poster" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>

        <!-- 海报 -->
        <van-overlay :show="posterShow" @click="posterShow = false" :zIndex="2001">
            <div class="share-image center-xy" style="top: 43%" :style="{ height: `8.8rem` }">
                <div class="position-relative w-100 h-100">
                    <div class="w-100 h-100">
                        <img :src="src" alt="分享海报" class="haibao-img" style="pointer-events: inherit" />
                    </div>

                    <div
                        class="position-absolute"
                        @click.stop="posterShow = false"
                        style="top: -15px; right: -15px; width: 30px; height: 30px; z-index: 3001"
                    >
                        <img class="w-100 h-100" src="@/assets/images/close1.png" alt="" />
                    </div>
                </div>
            </div>
            <div @click.stop class="position-fixed left-0 w-100 text-center bottom-0 bg-fff" style="border-radius: 10px 10px 0 0">
                <div class="grid-column2 font-14 grid-c-20 border-bottom">
                    <div
                        v-clipboard:copy="copyLink()"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError"
                        class="py-1 d-flex flex-column a-center"
                    >
                        <span class="iconfont iconfuzhiwenan" style="font-size: 36px; color: #f7b500"></span>
                        <span class="text-666">复制链接</span>
                    </div>
                    <div class="py-1 d-flex flex-column a-center">
                        <span class="iconfont icontuwenhaibao" style="font-size: 36px; color: #068dff"></span>
                        <span class="text-666">长按图片保存</span>
                    </div>
                </div>
                <div @click.stop="posterShow = false" class="text-center py-1 font-14">
                    <span>取消</span>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Noempty from '@/components/Noempty/Noempty'
import PartLoading from '@/components/PartLoading/PartLoading'
import PageUtil from 'utils/PageUtil'
import { distributorShopProds, distributorShopQueryCategory, distributorShopInfo, distributorShopDeleteProd } from '@/api/personal'
import cash from 'utils/tool'
import { VueCanvasPoster } from 'vue-canvas-poster'
import { ImagePreview } from 'vant'
import { colorRgb } from '@/utils/utils'
import { mapState } from 'vuex'
import legendImage from 'components/legendImage/legendImage'

const pageUtil = new PageUtil(distributorShopProds)

export default {
    name: '',
    components: { Noempty, PartLoading, VueCanvasPoster, legendImage },
    data() {
        return {
            showCategory: false,
            checkList: [], // 选则的商品数组
            partLoading: true, // 局部加载loadding
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                firstCatId: '', // 一级分类id
                sortName: '', // 排序名称 销量buys 价格price
                sortType: '' // 排序方式 升序asc 降序desc
            },
            money: cash,
            categoryList: [], // 分类列表
            activeCategory: '', // 当前激活的分类id
            painting: {}, // 海报数据
            posterShow: false, // 海报弹窗
            src: '', // 海报url
            shopInfo: '', // 店铺信息
            activeGood: '' // 点击分享海报的商品
        }
    },
    computed: {
        ...mapState(['themes']),
        bg02() {
            return `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${colorRgb(this.themes.color).b}, 0.2) !important`
        }
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getShopInfo()
        this.getCategoryList()
        pageUtil.loadListByPage(this, this.params, {
            success: () => {
                this.partLoading = false
            }
        })
    },
    methods: {
        loadMore() {
            pageUtil.loadListByPageMore(this.params)
        },

        // 店铺数据
        getShopInfo() {
            distributorShopInfo()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.shopInfo = res.result
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 获取分类
        getCategoryList() {
            distributorShopQueryCategory()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.categoryList = res.result
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 选择分类
        selectCategory(category) {
            // 如果点击同一个分类，则不选择
            if (this.activeCategory.id == category.id) {
                this.activeCategory = ''
                this.$set(this.params, 'firstCatId', '')
            } else {
                this.activeCategory = category
                this.$set(this.params, 'firstCatId', category.id)
            }
            this.$set(this.params, 'curPageNO', 1)
            this.partLoading = true
            pageUtil.loadListByPage(this, this.params, {
                success: () => {
                    this.partLoading = false
                    this.showCategory = false
                }
            })
        },

        // 排序商品
        selectSort(type) {
            if (this.params.sortName == type) {
                this.$set(this.params, 'sortType', this.params.sortType == 'desc' ? 'asc' : 'desc')
            } else {
                this.$set(this.params, 'sortName', type)
                this.$set(this.params, 'sortType', 'desc')
            }
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params, {
                success: () => {
                    this.partLoading = false
                }
            })
        },

        // 取消
        cancel() {
            this.checkList = []
        },

        // 移除
        remove() {
            distributorShopDeleteProd({
                prodIds: this.checkList.join(',')
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.partLoading = true
                    this.$set(this.params, 'curPageNO', 1)
                    pageUtil.loadListByPage(this, this.params, {
                        success: () => {
                            this.partLoading = false
                            this.checkList = []
                        }
                    })
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 海报生成成功回调函数
        success(src) {
            this.posterShow = true
            this.src = src
        },

        // 海报生成失败回调函数
        fail(error) {
        },

        // 预览
        preview() {
            ImagePreview({
                images: [this.src],
                showIndex: false,
                showIndicators: false
            })
        },

        // 分享商品
        shareGood(goodItem) {
            this.activeGood = goodItem
            this.painting = {
                width: '235px',
                height: '440px',
                background: '#ffffff',
                views: [
                    // 商品图
                    {
                        type: 'image',
                        url: this.$imgUrlHead + goodItem.prodPic,
                        css: {
                            width: '215px',
                            height: '215px',
                            left: '10px',
                            top: '65px',
                            right: '10px'
                        }
                    },
                    // 店铺名
                    {
                        type: 'text',
                        text: this.shopInfo.shopName,
                        css: {
                            fontSize: '14px',
                            color: '#333',
                            textAlign: 'left',
                            top: '10px',
                            left: '55px',
                            width: '70%',
                            height: '20px',
                            maxLines: '1',
                            lineHeight: '20px'
                        }
                    },
                    // 标题语
                    {
                        type: 'text',
                        text: `分享店铺好物`,
                        css: {
                            fontSize: '12px',
                            color: '#999',
                            textAlign: 'left',
                            top: '33px',
                            left: '55px',
                            width: '70%',
                            height: '20px',
                            maxLines: '1',
                            lineHeight: '20px'
                        }
                    },
                    // 店铺头像
                    {
                        type: 'image',
                        url: this.$imgUrlHead + this.shopInfo.shopAvatar,
                        css: {
                            top: '10px',
                            left: '10px',
                            width: '40px',
                            height: '40px',
                            borderRadius: '50px',
                            zIndex: 90
                        }
                    },
                    // 商品标题
                    {
                        type: 'text',
                        text: goodItem.prodName,
                        css: {
                            fontSize: '14px',
                            color: '#333',
                            textAlign: 'left',
                            top: '295px',
                            left: '10px',
                            right: '10px',
                            width: '90%',
                            maxLines: '2',
                            lineHeight: '20px'
                        }
                    },
                    // 二维码
                    {
                        type: 'qrcode',
                        content: `${window.location.origin}/goodsDetail?goodsInfoId=${goodItem.prodId}&invitCode=${this.shopInfo.invitationCode}`,
                        css: {
                            bottom: '25px',
                            right: '10px',
                            width: '70px',
                            height: '70px'
                        }
                    },
                    {
                        type: 'text',
                        text: this.shopInfo.posterSlogan,
                        css: {
                            fontSize: '10px',
                            color: '#999',
                            textAlign: 'center',
                            bottom: '8px',
                            right: '15px',
                            width: '64px',
                            height: '14px',
                            maxLines: '1',
                            lineHeight: '14px'
                        }
                    },
                    // 价钱符号
                    {
                        type: 'text',
                        text: `￥`,
                        css: {
                            fontSize: '12px',
                            color: '#EE4133',
                            textAlign: 'left',
                            bottom: '59px',
                            left: '10px',
                            width: '140px',
                            height: '30px',
                            maxLines: '2',
                            lineHeight: '30px',
                            borderRadius: '2px'
                        }
                    },
                    // 价钱
                    {
                        type: 'text',
                        text: `${this.money(goodItem.price)[0]}.${this.money(goodItem.price)[1]}`,
                        css: {
                            fontSize: '18px',
                            color: '#EE4133',
                            textAlign: 'left',
                            bottom: '65px',
                            left: '20px',
                            width: '140px',
                            height: '30px',
                            maxLines: '2',
                            lineHeight: '30px',
                            borderRadius: '2px',
                            fontWeight: 'bold'
                        }
                    },
                    // 个性邀请语
                    {
                        type: 'text',
                        text: this.shopInfo.posterWord,
                        css: {
                            fontSize: '12px',
                            color: '#999',
                            textAlign: 'left',
                            bottom: '20px',
                            left: '10px',
                            width: '140px',
                            height: '22px',
                            maxLines: '2',
                            lineHeight: '18px',
                            borderRadius: '2px'
                        }
                    }
                ]
            }
        },

        // 复制链接
        copyLink() {
            return `${window.location.origin}/goodsDetail?goodsInfoId=${this.activeGood.prodId}&invitCode=${this.shopInfo.invitationCode}`
        },

        //复制
        onCopy() {
            this.$toast.success({
                message: '复制成功',
                duration: 1000
            })
        },
        onError() {
            this.$toast.fail({
                message: '复制失败',
                duration: 1000
            })
        }
    }
}
</script>

<style scoped>
.share-image {
    width: 4.7rem;
    height: 8.8rem;
    display: block;
    position: relative;
    z-index: 3000;
}

.share-image .img {
    display: block;
    width: 100%;
    height: 100%;
}

.share-image .haibao-img {
    width: 100%;
    height: 100%;
    display: block;
}

.van-popup {
    overflow-y: inherit !important;
}
</style>
